<template>
	<view>
		<view class="py-1 font-md mx-2 mt-3 mb-2 text-muted">搜索历史</view>
		<view class="flex flex-wrap">
			<view class="border rounded font-sm mx-2 my-1 px-2 py-1 text-muted" 
			v-for="(item, index) in list" :key="index" hover-class="bg-hover-light"
			@click="searchHistory(item)">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"keywords": "",
				"list": [
					"uni-app第二季实战商城类app和小程序",
					"vue",
					"vue3.0",
					"vue实战",
					"uni-app实战",
					"vuex实战",
					"uni-app第二季实战微信app和小程序",
					"vuex",
					"依赖注入"
				]
			}
		},
		/* 监听搜索框子的变化 */
		onNavigationBarSearchInputChanged(e) {
			this.keywords = e.text
		},
		/* 监听按钮触发 */
		onNavigationBarButtonTap(e){
			if(e.index === 0 && this.keywords != ''){
				this.searchHandle();
			}
		},
		methods: {
			/* 点击历史搜索 */
			searchHistory(v){
				this.keywords = v
				this.searchHandle()
			},
			/* 触发搜索 */
			searchHandle(){
				/* 收起键盘 */
				uni.hideKeyboard()
				/* 开始搜索 */
				uni.showLoading({
					title: '数据加载中...',
					mask: false
				});
					
			}
		}
	}
</script>

<style>

</style>
